<template>
    <div>
      <div class="card card-custom gutter-b example example-compact" id="tableBody">
        <div class="card-header">
          <div class="card-title">
            <span class="card-icon">              
              <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
            </span>
            <h3 class="card-label"> 查询区域 </h3>
          </div>
          <div class="card-toolbar">
            <div class="example-tools justify-content-center">
              <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
            </div>
          </div>
        </div>
        <div class="card-body">
            <!--查询条件-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
              <div class="m-portlet__body">	
                <div class="form-group m-form__group row">
                    <label class="col-form-label">版本名称:</label>
                    <div class="col-lg-2">
                        <input type="text" class="form-control" v-model="searchForm.name" placeholder="请输入">
                    </div>
                    <label class="col-form-label">上传时间:</label>
                    <div class="col-lg-6">
                        <el-date-picker
                          v-model="searchForm.dateRange"
                          type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="dateFormat"
                          :picker-options="pickerOptions">
                      </el-date-picker>
                    </div>
                </div>
                <div class="form-group m-form__group row">
                    <label class="col-form-label">修改时间:</label>
                    <div class="col-lg-5">
                      <el-date-picker
                        v-model="searchForm.dateRange1"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="dateFormat1"
                        :picker-options="pickerOptions">
                    </el-date-picker>                       
                    </div>        
                    <div class="col-lg-3">
                      <b-button :pressed="false" variant="btn btn-light-primary font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="search()"><span><i
                        class="flaticon-search-magnifier-interface-symbol"></i><span>查 询</span></span></b-button>
                      <b-button :pressed="false" variant="btn btn-light font-weight-bold font-size-sm py-3 px-8 mr-2 " @click="resetAll()">
                      <span><i class="flaticon2-refresh"></i><span>重 置</span></span></b-button>
                    </div>            
                </div>
              </div> 
              <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                <div class="m-form__actions m-form__actions--solid">
                  <div class="row">
                    <div class="col m--align-left">
                      
                      <button class="btn btn-light-success font-weight-bold font-size-sm py-3 px-8 mr-2" 
                      v-permission="{ action: '/sysVersion/add', effect: 'display' }"
                      @click="addSysVersion">
                        <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                      </button>
                    </div>
                    <div class="col m--align-right">
                    </div>
                  </div>
                </div>
              </div>             
            </div>
        </div>
        <!--分页组件-->
        <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row 
        :data="versionList" >
        
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column align="left" prop="name" show-overflow-tooltip label="版本名称"></el-table-column>    
          <el-table-column align="left" prop="down" show-overflow-tooltip label="下载次数"></el-table-column>    
          <el-table-column align="center" prop="createBy"  label="创建人" min-width="150"></el-table-column>
          <el-table-column align="center" prop="createTime"  label="创建时间" min-width="180"></el-table-column>
          <el-table-column align="center" prop="modifiedBy"  label="修改人" min-width="150"></el-table-column>
          <el-table-column align="center" prop="updateTime"  label="修改时间" min-width="180"></el-table-column>        
          <el-table-column align="center" label="操作" fixed="left" width="280">
            <template slot-scope="scope">
              <!--scope.row当前行的对象-->
              <button @click="getVersionDetail(scope.row)" class="btn btn-link" title="详情">详 情</button>
              <button class="btn btn-link"
              v-permission="{ action: '/sysVersion/update', effect: 'disabled' }"
              @click="updateSysVersion(scope.row)"> 
                <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
              </button>
              <button class="btn btn-link-danger"
              v-permission="{ action: '/sysVersion/delete', effect: 'disabled' }"
              @click="delSysVersion(scope.row)"> 
                <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
              </button>              
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            hide-on-single-page   
            @size-change="handleSizeChange"        
            @current-change="handleCurrentChange"  
            :current-page="pageNo"                
            :page-sizes="[5, 10, 30, 50]"          
            :page-size="pageSize"			  
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="totalCount">		
          </el-pagination>
        </div>
      </div>
      <VsersionAdd ref="versionAddRef" @change="search"></VsersionAdd><!--采用父窗口关闭传递的方法-->
      <VsersionUpdate ref="versionUpdateRef" @change="search"></VsersionUpdate><!--采用父窗口关闭传递的方法-->
      <VsersionDetail ref="versionDetailRef"></VsersionDetail>
  </div> 
</template>
  
<script>
  import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
  import VsersionAdd from "@/view/sys/sys-version/sys-version-add.vue";
  import VsersionUpdate from "@/view/sys/sys-version/sys-version-update.vue";
  import VsersionDetail from "@/view/sys/sys-version/sys-version-detail.vue";
  import Swal from "sweetalert2";
  import apiUtil from "@/core/util/apiUtil.js"; 
  import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
  export default {
    data(){
      return{
        searchForm:{dateRange:"" ,dateRange1:"" ,name: "",createTimeSt:"",createTimeEt:"",updateTimeSt:"",updateTimeEt:""},
        pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
        },
        versionList:[],
        sels: [], //当前选框选中的值
        pageNo:1,      // 默认当前是第一页
        pageSize:5,    // 当前每页的数据是5条
        totalCount:0   // 总数默认为0
      }
    },
    components: {
        VsersionAdd,
        VsersionUpdate,
        VsersionDetail,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "版本控制" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods:{
      initList(){
        showWating({renderBody:"tableBody"});
        var params = {};
        params.usePageNo = true;//采用第几页进行分页（兼容）
        params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
        params.pageNo = this.pageNo;//开始的记录序号   
        params.name = this.searchForm.name;//为form元素    
        if(null != this.searchForm.createTimeSt && '' != this.searchForm.createTimeSt){
            params.createTimeSt = this.searchForm.createTimeSt;//为form元素   
        }
        if(null != this.searchForm.createTimeEt && '' != this.searchForm.createTimeEt){
            params.createTimeEt = this.searchForm.createTimeEt;
        }   
        if(null != this.searchForm.updateTimeSt && '' != this.searchForm.updateTimeSt){
            params.updateTimeSt = this.searchForm.updateTimeSt;//为form元素   
        }
        if(null != this.searchForm.updateTimeEt && '' != this.searchForm.updateTimeEt){
            params.updateTimeEt = this.searchForm.updateTimeEt;
        }   
        apiUtil.query(process.env.VUE_APP_SYS_API+"/sysVersion/list", params).then(({ data }) => {
          this.versionList = data.data;//给结果集赋值
          this.totalCount = data.total;// 获取当前数据的总数    
        });
      },    
      dateFormat(picker) {
          if(null == picker){
              this.searchForm.createTimeSt = ""
              this.searchForm.createTimeEt = ""
          }else{
              this.searchForm.createTimeSt = picker[0].toString()
              this.searchForm.createTimeEt = picker[1].toString()
          }
      },
      dateFormat1(picker) {
          if(null == picker){
              this.searchForm.updateTimeSt = ""
              this.searchForm.updateTimeEt = ""
          }else{
              this.searchForm.updateTimeSt = picker[0].toString()
              this.searchForm.updateTimeEt = picker[1].toString()
          }
      },
      handleSelectionChange(sels) {//获取选中的值
        this.sels = sels;
      },
      addSysVersion(){//新建
        this.$refs.versionAddRef.showModal()
      },
      updateSysVersion(row){// 更新
        this.$refs.versionUpdateRef.showModal(row.id);
      },
      delSysVersion(row){ // 删除
        // 删除前提示
        this.$confirm("确认删除记录吗?", "提示", {type: "warning",}).then(() => {
          apiUtil.delete(process.env.VUE_APP_SYS_API+"/sysVersion/delete?id="+row.id).then(data=>{
            if(data.data.success){
              handleAlert("删除成功", "success", 3);
              this.search();
            }else {
              handleAlert("删除失败", "error", 3);
            }
          });
        }).catch(()=>{});//注意这里，这里是重点！！！;        
      },
      handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
        this.pageSize = val;  // 修改页的大小
        this.initList();       // 按新的pageNo和pageSize进行查询
      },
      handleCurrentChange(val) { // 修改当前页所触发的函数
        this.pageNo = val;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      search(){
        this.pageNo = 1;       // 更新当前的页
        this.initList();          // 按新的pageNo和pageSize进行查询
      },
      resetAll(){
        Object.assign(this.$data.searchForm, this.$options.data().searchForm);
        this.search();
      },
      getVersionDetail(row){
        this.$refs.versionDetailRef.showModal(row.id);
      },
    }
  };
</script>